<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no">
<style>
*{
margin:0px;
padding:0px;
}
body{
background:#efefef;
}
.page_top{
background:white;
padding:10px;
padding-bottom:40px;
}
.photo{
text-align:right;
margin-bottom:20px;
}
.userinfo{
display:flex;
}
.otherinfo{
width:100%;
}
.userpic{
margin-right:10px;
}
.userpic img{
width:70px;
border-radius:4px;
}
.nickname{
font-size:20px;
font-weight=bold;
margin-bottom:24px;
}
.wechat_no{
width:70%;
color:#999;
}
.icons {
width:30%;
text-align:right;
}
.icons img{
margin-left:10px;
}
.more{
display:flex;
justify-content:space-between;
width:100%;
}
    .list_item{
        display:flex;
        justify-content: space-between;
        align-items: center;
        background:white;
        padding:10px;
        position:relative;
    }
    .pictxt{
        display: flex;
        align-items: center;
    }
    .pictxt img{
        margin-left:20px;
    }
    .list .txt{
        margin-left:20px;
    }

    .line{
        width:80%;
        height:1px;
        background:#efefef;
        position:absolute;
        right:0px;
        bottom:0px;
    }
    .list{
        margin-top:10px;
        margin-bottom:10px;
    }
    .tabbar{
        position:fixed;
        width:100%;
        left:0px;
        bottom:0px;
        display:flex;background:white;padding-top:5px;}
    .tab{ padding-bottom:5px;width:25%;font-size:12px;text-align: center;
        position:relative}
    .tabbar .txt{margin-top:2px;}
    .notice{
        position:absolute;
        left:52%;top:-3px;
        width:14px;height:14px;
        line-height:14px;text-align: center;
        font-size:8px;background:red;
        color:white;
        border-radius: 50%;
    }
</style>
<div class="all">
<div class="page_top">
<div class="photo">
<img src="photo.png" width="24">
</div>
<div class="userinfo">
<div class="userpic">
<img src="touxiang.png">
</div>
<div class="otherinfo">
<div class="nickname">王giao凡</div>
<div class="more">
<div class="wechat_no">微信号：wanggiaofan</div>
<div class="icons">
<img src="code.png" width="20">
<img src="jiantou.png" width="20">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /页面头部 -->

    <!-- 页面列表 -->
    <div class="item_list">
        <div class="list1 list">
            <div class="list_item">

                <div class="pictxt">
                    <a href="money.html"><img src="9.png" width="30" /></a>
                    <div class="txt">支付</div>
                </div>
                <img class="arrow" src="jiantou.png" width="20" />
            </div>
        </div>

        <div class="list2 list">
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="10.png" width="30" />
                    <div class="txt">收藏</div>
                </div>
                <img class="arrow" src="jiantou.png" width="20" />
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="11.png" width="30" />
                    <div class="txt">朋友圈</div>
                </div>
                <img class="arrow" src="jiantou.png" width="20" />
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="12.png" width="30" />
                    <div class="txt">卡包</div>
                </div>
                <img class="arrow" src="jiantou.png" width="20" />
            </div>
            <div class="list_item">

                <div class="pictxt">
                    <img src="13.png" width="30" />
                    <div class="txt">表情</div>
                </div>
                <img class="arrow" src="jiantou.png" width="20" />
            </div>
        </div>

        <div class="list3 list">
            <div class="list_item">

                <div class="pictxt">
                    <img src="14.png" width="30" />
                    <div class="txt">设置</div>
                </div>
                <img class="arrow" src="jiantou.png" width="20" />
            </div>
        </div>
    </div>
    <!-- /页面列表 -->

    <!-- 底部导航 -->
    <div class="tabbar">
        <div class="tab">
              <a href="index.html"><img src="1.png" width="28" /></a> 
            <div class="txt">微信</div>
            <div class="notice">5</div>
        </div>
        <div class="tab">
            <a href="txl.html"><img src="3.png" width="28" /></a>
            <div class="txt">通讯录</div>
        </div>
        <div class="tab">
            <a href="fx.html"><img src="5.png" width="28" /></a>
            <div class="txt">发现</div>
        </div>
        <div class="tab">
            <a href="my.html"><img src="7.png" width="28" /></a>
            <div class="txt">我</div>
        </div>
    </div>
    <!-- /底部导航 -->
</div>